<template>
  <div class="todo">
    <todo-input @add="onAddNewTask"></todo-input>
    <todo-list :list="tasks" class="mt-2"></todo-list>
    <todo-button @button-change="list_change"></todo-button>
    <!-- {{ todoList }} -->
  </div>
</template>

<script>
import TodoInput from '../components/todo/TodoInput.vue';
import TodoList from '../components/todo/TodoList.vue';
import TodoButton from '../components/todo/TodoButton.vue';

export default {
  name: 'todo',
  components: { TodoInput, TodoList, TodoButton },
  data() {
    return {
      todoList: [
        { id: 1, task: '周一早晨9点开会', done: false },
        { id: 2, task: '周一晚上8点聚餐', done: false },
        { id: 3, task: '准备周三上午的演讲稿', done: true },
      ],
      // todoList: JSON.parse(localStorage.getItem('todoList')) || [],
      btn_index: 0,
    };
  },
  methods: {
    onAddNewTask(taskName) {
      //向任务列表中新增任务信息
      this.todoList.push({
        id: this.todoList.length + 1,
        task: taskName,
        done: false,
      });
    },
    // 0 1 2
    list_change(value) {
      // 接收此时的按钮索引
      this.btn_index = value;
    },
  },
  computed: {
    // 依赖的数据 改变 触发
    tasks() {
      switch (this.btn_index) {
        case 0:
          return this.todoList;
        case 1:
          return this.todoList.filter((item) => item.done);
        case 2:
          return this.todoList.filter((item) => !item.done);
      }
    },
  },
  // watch: {
  //   todoList: {
  //     // 开启深度监视
  //     deep: true,
  //     handler(value) {
  //       localStorage.setItem('todoList', JSON.stringify(value));
  //     },
  //   },
  // },
};
</script>
